<section class="topbox">
    <div class="top-type">{{proInfo.orderStatusStr}}</div>
    <div class="gutter-example">
        <div nz-row [nzGutter]="32">
            <div nz-col class="gutter-row" [nzSpan]="8">
                <div class="grid-config">
                    <p>项目单号</p>
                    <p>{{proInfo.orderNo}}</p>
                </div>
            </div>
            <div nz-col class="gutter-row" [nzSpan]="8">
                <div class="grid-config">
                    <p>发货日期</p>
                    <p>{{proInfo.deliverTime}}</p>
                </div>
            </div>
            <div nz-col class="gutter-row" [nzSpan]="8">
                <div class="grid-config">
                    <p>公司</p>
                    <p>{{proInfo.companyName}}</p>
                </div>
            </div>
            <div nz-col class="gutter-row" [nzSpan]="8">
                <div class="grid-config">
                    <p>发布人</p>
                    <p>{{proInfo.customerName}}</p>
                </div>
            </div>
            <div nz-col class="gutter-row" [nzSpan]="8">
                <div class="grid-config">
                    <p>车辆类别</p>
                    <p>{{proInfo.carType}}</p>
                </div>
            </div>
            <div nz-col class="gutter-row" [nzSpan]="8">
                <div class="grid-config">
                    <p>挂车</p>
                    <p>{{proInfo.isTrailer}}</p>
                </div>
            </div>
            <div nz-col class="gutter-row" [nzSpan]="8">
                <div class="grid-config">
                    <p>车辆</p>
                    <p>{{proInfo.carNum}}</p>
                </div>
            </div>
            <div nz-col class="gutter-row" [nzSpan]="8">
                <div class="grid-config">
                    <p>货重（t）</p>
                    <p>{{proInfo.goodsWeight}}</p>
                </div>
            </div>
            <div nz-col class="gutter-row" [nzSpan]="8">
                <div class="grid-config">
                    <p>预计耗时</p>
                    <p>{{proInfo.expectCostTime}}</p>
                </div>
            </div>
            <div nz-col class="gutter-row" [nzSpan]="8">
                <div class="grid-config">
                    <p>司机运费（元）</p>
                    <p>{{proInfo.freight}}</p>
                </div>
            </div>
            <div nz-col class="gutter-row" [nzSpan]="8">
                <div class="grid-config">
                    <p>运费状态</p>
                    <p>{{proInfo.payStatus}}</p>
                </div>
            </div>
        </div>
    </div>
    <section class="router">
        <section class="title">
            <h3>路径</h3>
        </section>
        <section class="routerway">
            <section class="begin">
                <h3>{{proInfo.startingCity}}</h3>
            </section>
            <section class="line">
                <h3>运至</h3>
            </section>
            <section class="end">
                <h3>{{proInfo.endCity}}</h3>
            </section>
        </section>
    </section>
    <section class="action">
        <div nz-row>
            <div nz-col class="gutter-row" [nzSpan]="8">
                <div class="grid-config">
                    <p style="font-weight:600">指派</p>
                    <p></p>
                </div>
            </div>
        </div>
        <div nz-row>
            <div nz-col class="gutter-row" [nzSpan]="8">
                <div class="grid-config">
                    <p>司机运费（元）</p>
                    <p>{{proInfo.freight}}</p>
                </div>
            </div>
        </div>
        <div>
            <div class="table">
                <nz-table #nzTable [nzDataSource]="data" [nzPageSize]="10">
                    <thead nz-thead>
                        <tr>
                            <th nz-th><span>序号</span></th>
                            <th nz-th><span>派车单号</span></th>
                            <th nz-th><span>司机账号</span></th>
                            <th nz-th><span>司机名称</span></th>
                            <th nz-th><span>司机手机号</span></th>
                            <th nz-th><span>物流公司名称</span></th>
                            <th nz-th><span>驾驶证类型 </span></th>
                            <th nz-th><span>运费</span></th>
                            <th nz-th><span>派单状态</span></th>
                        </tr>
                    </thead>
                    <tbody nz-tbody>
                        <tr nz-tbody-tr *ngFor="let data of nzTable.data;let i = index">
                            <td nz-td>{{i+1}}</td>
                            <td nz-td>{{data.dispatchOrderNo}}</td>
                            <td nz-td>{{data.driverAccount}}</td>
                            <td nz-td>{{data.driverName}}</td>
                            <td nz-td>{{data.driverMobile}}</td>
                            <td nz-td>{{data.logisticsCompanyName}}</td>
                            <td nz-td>{{data.driverType}}</td>
                            <td nz-td>{{data.freight}}</td>
                            <td nz-td>{{data.orderStatus}}</td>
                        </tr>
                    </tbody>
                </nz-table>
            </div>
        </div>
    </section>
</section>